sample(auth): full customization demo - #2414
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces a fully customized authentication flow demo (FullCustomizationDemoActivity and associated steps) to showcase the capabilities of customMethodPickerLayout in FirebaseAuthScreen, alongside minor inset adjustments in the default auth screens. The review feedback is highly constructive and should be addressed: it recommends implementing a BackHandler for proper step-back navigation, making the alternative sign-in methods sheet scrollable to prevent clipping on smaller screens, passing the FirebaseAuth instance dynamically to support custom configurations, performing case-insensitive and trimmed email validation, and ensuring the loading indicator in CtaButton has sufficient contrast.
0cdfacd to
1778d6c
Compare
e98fb6e to
cbbd262
Compare
ccd214c to
267731e
Compare
267731e to
e035a60
Compare
74c0370 to
007676d
Compare
dbaac07 to
f896825
Compare
d552549 to
a2d2bc9
Compare
06a6fe9 to
697f1d9
Compare
4785c0e to
5e3a069
Compare
5e3a069 to
ba5b475
Compare
875cf50 to
1c0c935
Compare
8176916 to
48d81bf
Compare
dfab195 to
0a1fbd7
Compare
48d81bf to
cd928ef
Compare
9118458 to
b79fec3
Compare
cd928ef to
4873a4b
Compare
f6fd6a7 to
2371997
Compare
4873a4b to
655328c
Compare
…-state UI to full customization demo (cherry picked from commit 96694e0dddd4dacaa769d09ee153c34d4f51f8a2)
Intercept back on the login/sign-up steps so it returns to email entry instead of leaving the auth flow, make the other-sign-in-methods sheet scrollable (nine providers plus the ToS footer overflow shorter screens), compare the confirmation email trimmed and case-insensitively and give the field an email keyboard, and take the configured FirebaseAuth instance rather than reaching for the global default. (cherry picked from commit 1dfdeda82ecce93f6af54f4dfd6371d108c0ca44)
…ntState (cherry picked from commit 20681c413ada0394de19203bb2dde2784bac6d06)
… full-customization email flow
f7fed0e to
c7ddaee
Compare
…ng helpers out of MainActivity
Extends the full customization demo so the sample supplies a custom UI for every
FirebaseAuthScreenslot:emailContent,phoneContent,mfaEnrollmentContent(factor choice, SMS, TOTP, verification),mfaChallengeContent,reauthContentandauthenticatedContent.The authenticated screen mostly exists to make the others reachable — "Set up two-factor" navigates into enrollment, and changing the password runs through
authUI.withReauth, which is what provokes the reauth slot.screens/AuthMethodPickerUI.kthosts the primary email flow on its own Navigation 3 back stack — one route perEmailAuthModeplus the demo's ownEmailEntryKey— instead of swappingstate.modeinside a single screen. That is what gives the email steps real transitions, a working predictive-back gesture, and an address that survives moving between them.screens/reauth/is two screens.ReauthUI.ktis the provider chooser (ReauthContentState.providersarrives already filtered to the providers linked to this user).ReauthEmailStep.ktis a compact "Confirm it's you", because the library composes the reauth email step inside aModalBottomSheet— the full sign-in page does not fit there, and its sign-up and email-link affordances are switched off in reauth anyway.MainActivity.ktroutes a returning email link back to whichever demo sent it, keyed on a path segment each demo puts on its continue URL. Path rather than query:ContinueUrlBuilderappends?unconditionally, which would corrupt an existing query string.FullCustomizationDemoActivitynow consumesEXTRA_EMAIL_LINKso the link can complete there.withReauthcontract in this stack — backing out of the sheet no longer reports "couldn't change the password".common/AuthPage.kt: shared page frame (mascot, headline, card, bottom actions) for the MFA, reauth and authenticated screens, so their background, scrolling and inset behaviour match the email and phone steps.Preview
1-signin-signup-phone.mp4
2-email-link-signin.mp4
5-reauth.mp4
3-authenticated-mfa-enrollment.mp4
4-mfa-challenge.mp4